<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们 - 创界科技</title>
    <style>
        /* 基础样式与变量定义 - 与主站保持一致 */
        :root {
            --primary: #FF6B6B;
            --secondary: #4ECDC4;
            --accent: #FFE66D;
            --dark: #292F36;
            --light: #F7FFF7;
            --border-width: 4px;
            --shadow-offset: 8px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Courier New', monospace;
        }

        body {
            background-color: var(--light);
            color: var(--dark);
            padding: 20px;
            line-height: 1.6;
        }

        /* 新野蛮主义核心样式类 */
        .neu-card {
            border: var(--border-width) solid var(--dark);
            border-radius: 12px;
            background-color: white;
            box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--dark);
            transition: all 0.2s ease;
        }

        .neu-card:hover {
            transform: translate(2px, 2px);
            box-shadow: calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) 0px var(--dark);
        }

        .neu-button {
            display: inline-block;
            padding: 12px 24px;
            border: var(--border-width) solid var(--dark);
            border-radius: 8px;
            background-color: var(--primary);
            color: var(--dark);
            font-weight: bold;
            text-decoration: none;
            box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--dark);
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .neu-button:hover {
            transform: translate(2px, 2px);
            box-shadow: calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) 0px var(--dark);
        }

        .neu-button.secondary {
            background-color: var(--secondary);
        }

        .neu-button.accent {
            background-color: var(--accent);
        }

        /* 布局样式 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            margin-bottom: 40px;
            border-bottom: var(--border-width) solid var(--dark);
        }

        .logo {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary);
            text-shadow: 3px 3px 0px var(--dark);
        }

        nav ul {
            display: flex;
            list-style: none;
            gap: 20px;
        }

        nav a {
            text-decoration: none;
            color: var(--dark);
            font-weight: bold;
            padding: 8px 16px;
            border: var(--border-width) solid transparent;
            transition: all 0.2s ease;
        }

        nav a:hover {
            border: var(--border-width) solid var(--dark);
            background-color: var(--accent);
        }

        section {
            margin-bottom: 80px;
        }

        .section-title {
            font-size: 2.5rem;
            margin-bottom: 40px;
            text-align: center;
            position: relative;
        }

        .section-title::after {
            content: "";
            display: block;
            width: 100px;
            height: 5px;
            background-color: var(--primary);
            margin: 15px auto 0;
        }

        /* 联系我们页面特定样式 */
        .contact-hero {
            text-align: center;
            padding: 60px 40px;
            margin-bottom: 60px;
        }

        .contact-hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
        }

        .contact-hero p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto 30px;
        }

        .contact-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-bottom: 60px;
        }

        .contact-form {
            padding: 30px;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }

        .form-input,
        .form-textarea {
            width: 100%;
            padding: 12px 16px;
            border: var(--border-width) solid var(--dark);
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.2s ease;
        }

        .form-input:focus,
        .form-textarea:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.3);
        }

        .form-textarea {
            min-height: 150px;
            resize: vertical;
        }

        .contact-info {
            padding: 30px;
        }

        .info-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 30px;
        }

        .info-icon {
            width: 50px;
            height: 50px;
            background-color: var(--accent);
            border: var(--border-width) solid var(--dark);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            flex-shrink: 0;
            font-weight: bold;
        }

        .info-content h3 {
            margin-bottom: 8px;
            font-size: 1.3rem;
        }

        .map-container {
            height: 400px;
            background-color: var(--secondary);
            border: var(--border-width) solid var(--dark);
            border-radius: 12px;
            margin-bottom: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.2rem;
            overflow: hidden;
        }

        .faq-section {
            max-width: 800px;
            margin: 0 auto 60px;
        }

        .faq-item {
            margin-bottom: 20px;
        }

        .faq-question {
            font-weight: bold;
            margin-bottom: 10px;
            cursor: pointer;
            padding: 15px;
            background-color: white;
            border: var(--border-width) solid var(--dark);
            border-radius: 8px;
            box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--dark);
            transition: all 0.2s ease;
        }

        .faq-question:hover {
            transform: translate(2px, 2px);
            box-shadow: calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) 0px var(--dark);
        }

        .faq-answer {
            padding: 15px;
            background-color: white;
            border: var(--border-width) solid var(--dark);
            border-radius: 8px;
            margin-top: 10px;
            box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--dark);
        }

        /* 页脚样式优化 - 与主站保持一致 */
        footer {
            text-align: center;
            padding: 40px 0;
            border-top: var(--border-width) solid var(--dark);
            margin-top: 40px;
        }

        .footer-links {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin: 20px 0;
        }

        .footer-links a {
            color: var(--dark);
            text-decoration: none;
            font-weight: bold;
        }

        .footer-links a:hover {
            text-decoration: underline;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .contact-content {
                grid-template-columns: 1fr;
            }

            .map-container {
                height: 300px;
            }

            header {
                flex-direction: column;
                gap: 20px;
            }

            nav ul {
                flex-wrap: wrap;
                justify-content: center;
            }

            .footer-links {
                flex-direction: column;
                gap: 15px;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <div class="logo">创界科技</div>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="about.html">关于我们</a></li>
                    <li><a href="products.html">产品</a></li>
                    <li><a href="services.html">服务</a></li>
                    <li><a href="news.html">新闻动态</a></li>
                    <li><a href="team.html">团队</a></li>
                    <li><a href="contact.html"
                            style="border: var(--border-width) solid var(--dark); background-color: var(--accent);">联系我们</a>
                    </li>
                    <li><a href="job.html">岗位招聘</a></li>
                </ul>
            </nav>
        </header>

        <section class="contact-hero">
            <h1>联系我们</h1>
            <p>我们期待与您交流，无论您有任何问题、建议或合作意向，都可以通过以下方式与我们取得联系。我们的团队将尽快回复您。</p>
            <a href="#contact-form" class="neu-button">立即联系</a>
        </section>

        <section>
            <h2 class="section-title">获取联系</h2>
            <div class="contact-content">
                <div class="contact-form neu-card" id="contact-form">
                    <h3 style="margin-bottom: 20px;">发送消息</h3>
                    <form id="contactForm">
                        <div class="form-group">
                            <label for="name" class="form-label">姓名</label>
                            <input type="text" id="name" class="form-input" required>
                        </div>
                        <div class="form-group">
                            <label for="email" class="form-label">邮箱</label>
                            <input type="email" id="email" class="form-input" required>
                        </div>
                        <div class="form-group">
                            <label for="phone" class="form-label">电话</label>
                            <input type="tel" id="phone" class="form-input">
                        </div>
                        <div class="form-group">
                            <label for="company" class="form-label">公司</label>
                            <input type="text" id="company" class="form-input">
                        </div>
                        <div class="form-group">
                            <label for="subject" class="form-label">主题</label>
                            <select id="subject" class="form-input" required>
                                <option value="">请选择...</option>
                                <option value="product">产品咨询</option>
                                <option value="service">服务咨询</option>
                                <option value="cooperation">合作意向</option>
                                <option value="feedback">意见反馈</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="message" class="form-label">消息内容</label>
                            <textarea id="message" class="form-textarea" required></textarea>
                        </div>
                        <button type="submit" class="neu-button" style="width: 100%;">发送消息</button>
                    </form>
                </div>

                <div class="contact-info neu-card">
                    <h3 style="margin-bottom: 20px;">联系信息</h3>
                    <div class="info-item">
                        <div class="info-icon">地</div>
                        <div class="info-content">
                            <h3>公司地址</h3>
                            <p>北京市海淀区科技园区创新大厦15层</p>
                            <p>邮编：100000</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-icon">电</div>
                        <div class="info-content">
                            <h3>联系电话</h3>
                            <p>总机：010-12345678</p>
                            <p>业务咨询：010-12345679</p>
                            <p>技术支持：010-12345680</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-icon">邮</div>
                        <div class="info-content">
                            <h3>电子邮箱</h3>
                            <p>商务合作：business@chuangjie-tech.com</p>
                            <p>技术支持：support@chuangjie-tech.com</p>
                            <p>人力资源：hr@chuangjie-tech.com</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-icon">时</div>
                        <div class="info-content">
                            <h3>工作时间</h3>
                            <p>周一至周五：9:00 - 18:00</p>
                            <p>周六：9:00 - 12:00</p>
                            <p>周日及法定节假日休息</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section>
            <h2 class="section-title">我们的位置</h2>
            <div class="map-container neu-card">
                地图位置 - 北京市海淀区科技园区创新大厦
            </div>
        </section>

        <section class="faq-section">
            <h2 class="section-title">联系常见问题</h2>
            <div class="faq-item">
                <div class="faq-question">一般咨询的回复时间是多久？</div>
                <div class="faq-answer">
                    <p>我们会在收到咨询后的1个工作日内回复。对于复杂问题，可能需要2-3个工作日进行详细研究后回复。紧急问题请直接拨打我们的联系电话。</p>
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-question">是否提供上门咨询服务？</div>
                <div class="faq-answer">
                    <p>是的，对于重要客户和复杂项目，我们可以安排专业顾问上门服务。请通过电话或邮件预约，我们会根据您的需求安排合适的顾问和时间。</p>
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-question">如何获取产品演示？</div>
                <div class="faq-answer">
                    <p>您可以通过联系我们页面提交演示申请，或直接拨打业务咨询电话。我们会根据您的业务需求安排个性化的产品演示，可以选择线上演示或现场演示。</p>
                </div>
            </div>
            <div class="faq-item">
                <div class="faq-question">技术支持的服务范围是什么？</div>
                <div class="faq-answer">
                    <p>我们的技术支持包括产品使用指导、故障排查、系统优化建议等。对于购买了我们产品或服务的客户，我们提供不同级别的技术支持套餐，详情请咨询我们的技术支持团队。</p>
                </div>
            </div>
        </section>

        <section class="cta">
            <div class="neu-card" style="text-align: center; padding: 60px 40px;">
                <h2 style="margin-bottom: 20px; font-size: 2.5rem;">准备好开始合作了吗？</h2>
                <p>立即联系我们，获取专业的数字化转型解决方案</p>
                <div style="margin-top: 30px;">
                    <a href="#contact-form" class="neu-button accent">立即联系</a>
                    <a href="products.html" class="neu-button secondary" style="margin-left: 15px;">查看产品</a>
                </div>
            </div>
        </section>

        <footer>
            <div class="logo">创界科技</div>
            <div class="footer-links">
                <a href="index.html">首页</a>
                <a href="about.html">关于我们</a>
                <a href="products.html">产品</a>
                <a href="services.html">服务</a>
                <a href="news.html">新闻动态</a>
                <a href="team.html">团队</a>
                <a href="contact.html">联系我们</a>
            </div>
            <p>地址：北京市海淀区科技园区创新大厦15层</p>
            <p>电话：010-12345678 | 邮箱：contact@chuangjie-tech.com</p>
            <p style="margin-top: 20px;">© 2023 创界科技 | 创新驱动未来</p>
        </footer>
    </div>

    <script>
        // 表单提交处理
        document.addEventListener('DOMContentLoaded', function () {
            const contactForm = document.getElementById('contactForm');

            contactForm.addEventListener('submit', function (e) {
                e.preventDefault();

                // 简单的表单验证
                const name = document.getElementById('name').value;
                const email = document.getElementById('email').value;
                const subject = document.getElementById('subject').value;
                const message = document.getElementById('message').value;

                if (!name || !email || !subject || !message) {
                    alert('请填写所有必填字段');
                    return;
                }

                // 模拟表单提交
                alert('感谢您的留言！我们会尽快与您联系。');
                contactForm.reset();
            });

            // FAQ交互功能
            const faqQuestions = document.querySelectorAll('.faq-question');
            faqQuestions.forEach(question => {
                question.addEventListener('click', function () {
                    const answer = this.nextElementSibling;
                    const isVisible = answer.style.display === 'block';

                    // 关闭所有答案
                    document.querySelectorAll('.faq-answer').forEach(ans => {
                        ans.style.display = 'none';
                    });

                    // 切换当前答案
                    answer.style.display = isVisible ? 'none' : 'block';
                });
            });

            // 默认隐藏所有FAQ答案
            document.querySelectorAll('.faq-answer').forEach(answer => {
                answer.style.display = 'none';
            });
        });
    </script>
</body>

</html>